<template>
    <div>
        <el-form :model="form" label-width="auto">
            <el-form-item label="月份">
                <el-date-picker
                    v-model="form.value1"
                    type="month"
                    placeholder="请选择"
                />
            </el-form-item>
            <el-form-item label="网点">
                <el-select
                    v-model="form.value2"
                    multiple
                    collapse-tags
                    placeholder="请选择"
                    style="width: 240px"
                    >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="工程师">
              <el-autocomplete
                v-model="form.input"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入"
                @select="handleSelect"
              />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div>
        <el-table :data="tableData" style="width: 100%" show-summary sum-text='合计' height="500">
          <el-table-column label="基础消息" align="center">
            <el-table-column prop="address" label="账单编号" width="200" />
            <el-table-column prop="address" label="账期" width="150" />
            <el-table-column prop="state" label="网点" width="120" />
            <el-table-column prop="city" label="工程师" width="120" />
            <el-table-column prop="zip" label="电诉截止时间" width="120" />
            <el-table-column prop="state" label="初始单" width="120" />
            <el-table-column prop="city" label="成功单" width="120" />
            <el-table-column prop="address" label="成功率" />
            <el-table-column prop="zip" label="收款金额" width="120" />
          </el-table-column>
          <el-table-column label="收入" align="center">
            <el-table-column prop="state" label="分成收入" width="120" />
            <el-table-column prop="city" label="配件收入" width="120" />
            <el-table-column prop="address" label="其他收入" />
            <el-table-column prop="zip" label="合计" width="120" />
          </el-table-column>

          <el-table-column label="支出" align="center">
            <el-table-column prop="city" label="保险费支出" width="120" />
            <el-table-column prop="address" label="其他支出">
              <template #default="scope">
                <el-tooltip placement="right">
                  <template #content>
                    <div v-for="item in hoverText">
                      <div class="hover-text">
                        <span>{{ item.name }}</span>
                        <span>{{ item.nub }}</span>
                      </div>
                    </div>
                  </template>
                  <div class="hover" @mouseover='mouseover(scope.row.address)'>
                    {{ scope.row.address }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            
            <el-table-column prop="zip" label="合计" width="120" />
          </el-table-column>
          <el-table-column label="">
            <el-table-column prop="zip" label="结算金额" width="120" />
          </el-table-column>
          <el-table-column label="" fixed="right">
            <el-table-column fixed="right" label="操作" min-width="240">
              <template #default>
                <el-button link type="primary" size="small" @click="handleClick">
                  订单明细
                </el-button>
                <el-button link type="primary" size="small">收支明细</el-button>
              </template>
            </el-table-column>
          </el-table-column>           
        </el-table>
    </div>
    <div>1111</div>
</template>


<script setup>

import { ref, onMounted } from 'vue'
const form = ref({
    value1:'',
    value2:[],
    input:''
})
const options = ref([
  {
    value: '选项1',
    label: '黄金糕',
  },
  {
    value: '选项2',
    label: '双皮奶',
  },
  {
    value: '选项3',
    label: '蚵仔煎',
  },
  {
    value: '选项4',
    label: '龙须面',
  },
  {
    value: '选项5',
  }
])

 const tableData =  ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    state: '111',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: '11',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: '1',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: '1',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    state: '1',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    state: '1',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    state: '111',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
])

const onSubmit = () => {
    console.log(form.value.value1);
    console.log(form.value.value2);
    console.log(form.value.input);
  
//   const date = new Date(value.value);
//   const formattedDate = date.toLocaleDateString('en-CA');
//   console.log(formattedDate);
}

const links = ref([])
const loadAll = () => {
  return [
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'element', link: 'https://github.com/ElemeFE/element' },
    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
    { value: 'babel', link: 'https://github.com/babel/babel' },
  ]
}
let timeout
const querySearchAsync = (queryString, cb) => {
  const results = queryString
    ? links.value.filter(createFilter(queryString))
    : links.value

  clearTimeout(timeout)
  timeout = setTimeout(() => {
    cb(results)
  }, 3000 * Math.random())
}
const createFilter = (queryString) => {
  return (restaurant) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}

const handleSelect = (item) => {
  console.log(item)
}
const handleClick = () => {
  console.log('click');
}

const hoverText = ref([
  { name: '保证金代扣', nub: '1' },
  { name: '发票代扣', nub: '1' },
  { name: '保验代扣', nub: '1' },
  { name: '罚款扣除', nub: '1' },
  { name: '平台费代扣', nub: '1' },
  { name: '平台费代扣', nub: '1' }
])

console.log(hoverText);

const mouseover = (value) => {
  console.log(value);
}

onMounted(() => {
  links.value = loadAll()
})

</script>

<style scoped>
.el-form {
    display: flex;
}
.el-form-item {
    margin-left: 20px;
}
.el-table thead.is-group th.el-table__cell {
  background-color: #fff;
}
.hover {
  cursor: pointer;
}
.hover-text {
  width: 200px;
  display: flex;
  justify-content: space-between;
}
</style>